<!--
 @Author: libing/makeup1122
 @Email: makeup1123@163.com
 @Date: "2020-06-11 22:33:23"
-->
<template>
  <div>
    <component :is="editor" v-model="content" :label="label" :height="height"></component>
    <v-switch small color="red" false-value="WangEditor" true-value="TinyMCE5" hide-details v-model="editor" :label="'编辑器版本：' + (editor === 'TinyMCE5' ? 'TinyMCE5编辑器' :'WangEditor编辑器')"></v-switch>
  </div>
</template>
<script>
import WangEditor from '@/components/Editor/WangEditor.vue'
import TinyMCE5 from '@/components/Form/TinyMCE5/TinyMCE5.vue'
export default {
  name: 'RichTextEditor',
  components: { WangEditor, TinyMCE5 },
  props: {
    value: {
      type: String,
      default: null
    },
    label: {
      type: String,
      default: ''
    },
    height: {
      type: String,
      default: '400px'
    }
  },
  data: function () {
    return {
      editor: 'WangEditor',
      content: this.value
    }
  },
  watch: {
    content: function(newValue, oldValue) {
      this.$emit('input', newValue)
    }
  }
}
</script>
<style scoped>
</style>
